<template>
	<view>
		<!--轮播-->
		<uni-swiper-dot  :dots-styles="dotsStyles"  class="lunbo" :info="img" :current="current"  :mode="mode">
		    <swiper autoplay circular  interval="3000"  class="lunbo" @change="change">
		        <swiper-item  v-for="(item ,index) in img" :key="'img'+index">
		                <image class="imgs"  :src="item.url"></image>
		        </swiper-item>
		    </swiper>
		</uni-swiper-dot>
		<!--文字-->
		<view id="name">
			<view id="nametext">
				<text>{{product.proName}}</text>
			</view>
			
			<view id="kucun">
				<text space="ensp">全国热销 ( 库存 : {{product.stock}} )</text>
			</view>
			<view id="price">
				<b><text>¥{{product.price}}</text></b>
			</view>
		</view>
		<!--数量-->
		<view class="numbers">
			<view class="numbertext">
				<text>数量 :</text>
			</view>
			<uni-number-box :min="0" :value="number" :max="product.stock" class="number" @change="changeNumber"></uni-number-box>
		</view>
		<!--评论-->
		<view class="productPj">
			<view class="productPjLeft">
				<text>评价 ({{count}})</text>
			</view>
			<view class="productPjRight">
				<text class="icon" @click="goProductCommentList">查看全部评价 &#xebfa;</text>
			</view>
		</view>
		<!--评价详情-->
		<view class="pjDetail" v-for="(item,index) in comments" :key="index" v-if="index<1">
			<view class="userInfo">
				<view class="userImg">
					<image :src="item.user.imgUrl"></image>
				</view>
				<view class="userName">
					<b><text>{{item.user.username}}</text></b>
				</view>
				<view class="time">
					<text>{{changeTime(item.time)}}</text> 
				</view>
			</view >
			<view class="pjtext">
				<text>{{item.comment}}</text>
			</view>
		</view>
		<!--暂无评价,欢迎选购-->
		<view class="zanwupingjia" v-if="this.comments.length==0">
			<text>暂无评价,欢迎选购</text>
		</view>
		
		<!--商品详情-->
		<view class="proDetailTop">
			<text>商品详情</text>
		</view>
		<!--描述-->
		<view class="proDetailTopText">
			<view>
				<text class="describe">描述:</text>
				<text>{{product.describe}}</text>
			</view>
		</view>
		<!--图片-->
		<view class="bottomImg" v-for="(item,index) in img" :key="'img2'+index" >
			<image :src="item.url"></image>
		</view>
		
		<view class="liubai">
			
		</view>
		<!--购物车-->
		<view class="shopping">
			<view class="shopping1" @click="goCall">
				<text class="icon">&#xec2a;联系客服</text>
			</view>
			<view class="shopping2" @click="goCollection">
				<text id="collection" :class="flag==1?'active icon':'icon'">&#xec0a;{{collection}}</text>
			</view>
			<view class="shopping3" @click="addSoppingCar">
				<text>加入购物车</text>
			</view>
			<view class="shopping4" @click="goPay">
				<text>立即购买</text>
			</view>
		</view>
		
		<!--跳转到购物车-->
		<view class="toShoppingCar" @click="toCar">
			<text class="icon">&#xe7a6;</text>
		</view>
	</view>
</template>

<script>
	import uniGoodsNav from '@/liucomponents/uni-goods-nav/uni-goods-nav.vue'
	import uniSwiperDot from "@/liucomponents/uni-swiper-dot/uni-swiper-dot.vue"
	import uniNumberBox from "@/liucomponents/uni-number-box/uni-number-box.vue"
	export default {
		 components: {
			 uniSwiperDot,
			 uniNumberBox,
			 uniGoodsNav
		 },
		data() {
			return {
				productId:null,
				product:{
					proName:null
				},
				img:[],
				//购买商品数量
				number:0,
				//轮播参数
				current: 0,
				mode: 'indexes',
				//轮播指示点设置
				dotsStyles:{
					selectedBackgroundColor:"#FF8247",
					backgroundColor:"#87CEFA"
				},
				//商品详情集合
				comments:[],
				//评论数量
				count:null,
				//是否收藏
				collection:'收藏',
				//用户信息
				user:{
					
				},
				flag:null
			}	
		},
		onLoad(options){
			//获取用户信息
			// uni.getStorage({
			// 	key:"user",
			// 	success: (res) => {
			// 		this.user=res.data;
			// 	}
			// })
			//同步获取缓存
			const value=uni.getStorageSync("user");
			this.user=value;
			//查询商品详情
			this.productId=options.proId;
			uni.request({
				url:this.webUrl+"selectProductByProId",
				data:{
					'proId':options.proId,
					'categoryId':options.categoryId
				},
				
				success: (res) => {
					if(res.data.obj==null){
						uni.showToast({
							title:"该商品已下架"
						})
						return;
					}
					this.product=res.data.obj;
					this.img=res.data.obj.img;
				},
				fail: (err) => {
					uni.showToast({
						title:"商品详情加载失败"
					})
				}
			})
			//查询评价
			uni.request({
				url:this.webUrl+'selectAllProductCommentByProId',
				data:{
					'proId':this.productId,
					'pageIndex':0
				},
				success: (res) => {
					this.comments=res.data.list;
					this.count=res.data.list.length;
				},
				fail: (err) => {
					uni.showToast({
						title:"商品详情加载失败"
					})
				}
			})
			//查询是否收藏
			uni.request({
				url:this.webUrl+'judgeUserCollection',
				data:{
					'proId':options.proId,
					'userId':this.user.userId
				},
				success: (res) => {
					if(res.data.obj!=null){
						this.collection='取消收藏';
						this.flag=1;
					}else{
						this.flag=2
					}
				}
			})
			
		},
		watch:{
			'collection':function(){
				if(this.collection=='收藏'){
					this.flag=2;
				}else{
					this.flag=1;
				}
			},
			'number':function(){
				this.number=parseInt(this.number);
			}
		},
		methods: {
			 change(e) {
			    this.current = e.detail.current;
			 },
			 //给数量赋值
			 changeNumber(value){
				 this.number=value;
			 },
			 //处理时间方法
			 changeTime(time){
				 return time.substring(0,16);
			 },
			 //跳转更多评价
			 goProductCommentList(){
				uni.navigateTo({
					url:"/pages/liu/productCommentList/productCommentList?proId="+this.productId
				})
			},
			//收藏与取消收藏
			goCollection(){
				if(this.collection=='收藏'){
					uni.request({
						url:this.webUrl+"addCollection",
						data:{
							'userId':this.user.userId,
							'proid':this.productId
						},
						success: (res) => {
							if(res.data.code=='400'){
								uni.showToast({
									title:"收藏失败"
								});
								return;
							}
							uni.showToast({
								title:"收藏成功"
							});
							this.collection='取消收藏';
						}
					})
				}else{
					uni.request({
						url:this.webUrl+"deleteCollection",
						data:{
							'userId':this.user.userId,
							'proId':this.productId
						},
						success: (res) => {
							if(res.data.code=='400'){
								uni.showToast({
									title:"取消收藏失败"
								});
								return;
							}
							uni.showToast({
								title:"已取消收藏"
							});
							this.collection='收藏';
						}
					})
				}
			},
			//联系客服
			goCall(){
				uni.makePhoneCall({
				    phoneNumbe:'17783027893',
					success() {
						console.log("成功")
					},
					fail() {
						console.log("失败")
					}
				});
			},
			//加入购物车
			addSoppingCar(){
				if(this.number==0){
					uni.showToast({
						title:"请选择数量"
					});
					return;
				}
				uni.request({
					url:this.webUrl+"insertProductShoppingCar",
					data:{
						'proId':this.productId,
						'userId':this.user.userId,
						'number':this.number
					},
					success: (res) => {
						if(res.data.code='200'){
							uni.showToast({
								title:"已添加到购物车"
							});
							this.number=0;
						}else{
							uni.showToast({
								title:"添加购物车失败"
							});
						}
					}
				})
			},
			//跳转到支付页面
			goPay(){
				if(this.number==0){
					uni.showToast({
						title:"请选择数量"
					})
					return;
				}
				uni.navigateTo({
					url:'/pages/liu/payProduct/payProduct?proId='+this.productId+'&number='+this.number+'&categoryId='+this.product.categoryId
				})
			},
			//跳转到购物车
			toCar(){
				uni.switchTab({
					url:"/pages/liu/shoppingCar/shoppingCar"
				})
			}
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: rgb(220,220,220);
	}
	.lunbo{
		width: 100%;
		height: 600rpx;
		.imgs{
			width: 100%;
			height: 100%;
		}
	}
	#name{
		float: left;
		width: 100%;
		height: 290rpx;
		background-color: white;
		margin-top: 3rpx;
		#nametext{
			width: 95%;
			height: 100rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			font-size: 35rpx;
			overflow: hidden;
		}
		#kucun{
			font-size: 31rpx;
			margin-left: 2.5%;
			color: rgb(148,102,102);
		}
		#price{
			margin-left: 20rpx;
			margin-top: 30rpx;
			font-size: 40rpx;
			color: rgb(148,102,102);
		}
	}
	.numbers{
		float: left;
		width: 100%;
		height: 100rpx;
		background-color: white;
		margin-top: 15rpx;
		line-height: 100rpx;
		.numbertext{
			float: left;
			width: 100rpx;
			height: 100rpx;
			line-height:100rpx ;
			margin-left: 30rpx;
			font-size: 30rpx;
			color: rgb(129,131,142);
		}
		.number{
			float: left;
			margin: auto auto;
			margin-top: 15rpx;
			margin-left: 130rpx;
		}
	}
	//评价
	.productPj{
		float: left;
		width: 100%;
		height: 70rpx;
		background-color: white;
		margin-top: 15rpx;
		.productPjLeft{
			float: left;
			width: 400rpx;
			height: 70rpx;
			line-height: 70rpx;
			font-size: 26rpx;
			margin-left: 27rpx;
		}
		.productPjRight{
			float: left;
			width: 200rpx;
			height: 70rpx;
			line-height: 70rpx;
			margin-left: 100rpx;
			.icon{
				font-size: 26rpx;
			}
		}
	}
	
	//评价详情
	.pjDetail{
		float: left;
		width: 100%;
		background-color: white;
		margin-top:5rpx;
		.userInfo{
			float: left;
			width: 100%;
			height: 80rpx;
			.userImg{
				float: left;
				width: 45rpx;
				height: 45rpx;
				border: 3rpx solid rgb(200,200,200);
				margin-top: 10rpx;
				margin-left: 27rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.userName{
				float: left;
				width: 360rpx;
				height: 80rpx;
				font-size: 27rpx;
				line-height: 80rpx;
				margin-left: 20rpx;
				color: #00C5CD;
				
			}
			.time{
				float: left;
				width: 240rpx;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 27rpx;
			}
		}
		.pjtext{
			float: left;
			width: 660rpx;
			margin-top: 20rpx;
			margin-left: 45rpx;
			margin-bottom: 20rpx;
			font-size: 27rpx;
		}
	}
	.proDetailTop{
		float: left;
		width: 100%;
		height: 80rpx;
		background-color: white;
		margin-top: 9rpx;
		font-size: 27rpx;
		line-height: 80rpx;
		margin-bottom: 5rpx;
		text{
			margin-left:23rpx;
		}
		
	}
	.proDetailTopText{
		float: left;
		width: 100%;
		background-color: white;
		margin-bottom:20rpx ;
		view{
			float: left;
			width: 92%;
			margin-left: 4%;
			margin-top:18rpx ;
			margin-bottom: 20rpx;
			font-size: 28rpx;
			.describe{
				font-weight: bold;
				color: orange;
			}
		}
	}
	
	.bottomImg{
		float: left;
		width: 100%;
		text-align: center;
		background-color: white;
		margin-bottom:10rpx;
	}
	.zanwupingjia{
		width: 100%;
		height: 100rpx;
		float: left;
		background-color: white;
		line-height: 100rpx;
		text-align: center;
		margin-top: 2rpx;
		font-size: 36rpx;
		color: rgb(200,200,200);
		font-weight: bold;
	}

	//购物车
	.shopping{
		position: fixed;
		width: 100%;
		height: 90rpx;
		background-color: rgb(240,240,240);
		bottom: 0rpx;
		.shopping1{
			float: left;
			width: 25%;
			height: 100%;
			line-height:90rpx ;
			text-align: center;
			text{
				font-size: 27rpx;
			}
		}
		.shopping2{
			float: left;
			width: 25%;
			height: 100%;
			line-height:90rpx ;
			text-align: center;
			text{
				font-size: 27rpx;
			}
			.active{
				color:rgb(212,145,5);
			}
		}
		.shopping3{
			float: left;
			width: 25%;
			height: 100%;
			line-height:90rpx ;
			text-align: center;
			background-color: rgb(148,102,102);
			color: white;
			text{
				font-size: 27rpx;
			}
		}
		.shopping4{
			float: left;
			width: 25%;
			height: 100%;
			line-height:90rpx ;
			text-align: center;
			background-color: rgb(148,102,102);
			color: white;
			text{
				font-size: 27rpx;
			}
		}
	}
	
	//留白
	.liubai{
		float: left;
		width: 100%;
		height: 100rpx;
		background-color: rgb(220,220,220);
	}
	
	//跳转到购物车
	.toShoppingCar{
		position: fixed;
		right: 30rpx;
		bottom: 120rpx;
		width: 90rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		background-color: rgb(250,186,31);
		border-radius: 30rpx;
		text{
			font-size: 60rpx;
			color: black;
		}
		
	}
</style>
